window.addEventListener('load', function() {
    // logo变换开始
    var logo = document.querySelector('.logo');
    var logo_ul = logo.children[0];
    logo_ul.addEventListener('mouseenter', function() {
        // alert(1)
        animate(logo_ul, 0);
    });
    logo_ul.addEventListener('mouseleave', function() {
        animate(logo_ul, -55);
    });
    // logo变化结束

    // 二维码变化开始
    var erWeiMa = document.querySelector('.erweima');
    var app = document.querySelector('.app');
    app.addEventListener('mouseenter', function() {
        erWeiMa.style.display = 'block';
    });

    app.addEventListener('mouseleave', function() {
        erWeiMa.style.display = 'none';
    });
    // 二维码变化结束

    // 轮播图侧边导航栏开始

    var banner_left_nav = document.querySelector('.banner-left-nav');
    var banner_left_nav_ul = banner_left_nav.children[0];
    var banner_lis = banner_left_nav_ul.children;
    for (var i = 0; i < banner_lis.length; i++) {
        banner_lis[i].addEventListener('mouseenter', function() {
            for (var j = 0; j < banner_left_nav.children.length; j++) {
                banner_lis[j].className = '';
            }
            this.className = 'bgc';
        });
        banner_lis[i].addEventListener('mouseleave', function() {
            for (var j = 0; j < banner_left_nav.children.length; j++) {
                banner_lis[j].className = '';
            }
            this.className = '';
        })
    };
    // 轮播图侧边导航栏结束

    // 这是轮播图开始
    // alert(1);
    var arrL = document.querySelector('.arr-l');
    var arrR = document.querySelector('.arr-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;

    // 1、鼠标经过显示隐藏左右按钮
    focus.addEventListener('mouseenter', function() {
        arrL.style.display = 'block';
        arrR.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })

    focus.addEventListener('mouseleave', function() {
        arrL.style.display = 'none';
        arrR.style.display = 'none';
        timer = setInterval(function() {
            // 手动调用点击事件
            arrR.click();
        }, 2000)
    })

    // 2、动态化生成轮播图小圆圈
    var ul = focus.querySelector('ul')
    var ol = focus.querySelector('.circle')
        // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
        // 创建小li
        var li = document.createElement('li');
        // 设置当前 li 的索引号  通过自定义属性
        li.setAttribute('index', i);
        // 将li插入ol中
        ol.appendChild(li);
        // 绑定事件
        li.addEventListener('click', function() {
            // 3、排他思想解决小圆圈样式
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            // 4、点击小圆圈移动图片
            // 点击小圆圈获得索引号
            var index = this.getAttribute('index');
            // ul 的移动距离是 小圆圈的索引号 乘以 图片的宽度
            // console.log(focusWidth);
            num = index;
            circle = index;
            // 当我们点击了哪个小圆圈就把这个小圆圈的索引号给 num 和 circle
            // 5、引入封装好的函数动画
            animate(ul, -index * focusWidth);
        })
    }
    ol.children[0].className = 'current';
    // 6、克隆第一张图片
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7、左右两侧按钮绑定事件
    var num = 0;
    var circle = 0;
    var flag = true;
    arrR.addEventListener('click', function() {
        if (flag == true) {
            flag = false;
            // 如果走到了最后一张复制的图片，快速跳至第一张
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 8、点击左右按钮，小圆圈跟随跟随一起变化
            circle++;
            if (circle == 4) {
                circle = 0;
            }
            circleChange();
        }
    });
    arrL.addEventListener('click', function() {
        if (flag = true) {
            flag = false;
            // 如果走到了最后一张复制的图片，快速跳至第一张
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = num * focusWidth + 'px';

            }
            num--;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 8、点击左右按钮，小圆圈跟随跟随一起变化
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange();
        }
    });

    function circleChange() {
        // 排他思想
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }

    // 自动播放功能
    var timer = setInterval(function() {
        // 手动调用点击事件
        arrR.click();
    }, 2000)

    // 逻辑中断（节流阀）
    // 这是轮播图结束 


    // 侧边悬浮栏经过显示二维码
    var phone_app = document.querySelector('.phone_app');
    var APP_saoma = document.querySelector('.APP_saoma');
    phone_app.addEventListener('mouseenter', function() {
        APP_saoma.style.display = 'block';
    })

    phone_app.addEventListener('mouseleave', function() {
        APP_saoma.style.display = 'none';
    })


    // goback 模块
    var go_top = document.querySelector('.go_top');

    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= 1000) {;
            go_top.style.visibility = 'visible';
        } else {
            go_top.style.visibility = 'hidden';
        };

        go_top.addEventListener('click', function() {
            animation(window, 0);
        });

        function animation(obj, target, callback) {
            // console.log(callback);  callback = function() {}  调用的时候 callback()

            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    // if (callback) {
                    //     // 调用函数
                    //     callback();
                    // }
                    callback && callback();
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                // obj.style.left = window.pageYOffset + step + 'px';
                window.scroll(0, window.pageYOffset + step);
            }, 5);
        }
    })

    // 倒计时
    // 1. 获取元素 
    var day = document.querySelector('.day');
    var hour = document.querySelector('.hour'); // 小时的黑色盒子
    var minute = document.querySelector('.minute'); // 分钟的黑色盒子
    var second = document.querySelector('.second'); // 秒数的黑色盒子
    var inputTime = +new Date('2021-3-8 8:00:00'); // 返回的是用户输入时间总的毫秒数
    countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
    // 2. 开启定时器
    setInterval(countDown, 1000);

    function countDown() {
        var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
        var d = parseInt(times / 60 / 60 / 24); // 天
        d = d < 10 ? '0' + d : d;
        day.innerHTML = d;
        var h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
        var m = parseInt(times / 60 % 60); // 分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60); // 当前的秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }

    // 悬停特效
    var mi_phone_bd_big = document.querySelector('.mi_phone_bd_big');
    var phone = document.querySelectorAll('.phone');

    // 左边大图
    mi_phone_bd_big.addEventListener('mouseenter', function() {
        this.style.transform = 'translate(0px,-5px)';
        this.className = 'mi_phone_bd_big box_shadow';
    })

    mi_phone_bd_big.addEventListener('mouseleave', function() {
            this.style.transform = 'translate(0px,0px)';
            this.className = 'mi_phone_bd_big';
        })
        // 旁边8张小图
    for (var i = 0; i < phone.length; i++) {
        phone[i].addEventListener('mouseenter', function() {
            for (var j = 0; j < phone.length; j++) {
                phone[j].style.transform = 'translate(0px,0px)';
            }
            this.style.transform = 'translate(0px,-5px)';
            this.firstElementChild.className = 'box_shadow';
        })
        phone[i].addEventListener('mouseleave', function() {
            for (var g = 0; g < phone.length; g++) {
                // console.log(1);
                phone[g].style.transform = 'translate(0px,0px)';
                phone[g].firstElementChild.className = '';
            }
        })
    }
    // last 结尾两个小模块
    var name = document.querySelectorAll('.name');
    for (var i = 0; i < name.length; i++) {
        name[i].addEventListener('mouseenter', function() {
            this.style.transform = 'translate(0px,-5px)';
            this.className = 'box_shadow';
        })

        name[i].addEventListener('mouseleave', function() {
            this.style.transform = 'translate(0px,0px)';
            this.className = '';
        })
    }

    // 视频悬浮 播放按钮点亮
    var video = document.querySelectorAll('.video');
    for (var i = 0; i < video.length; i++) {
        video[i].addEventListener('mouseenter', function() {
            for (var j = 0; j < video.length; j++) {
                this.firstElementChild.color = '#fff';
                this.firstElementChild.style.border = '2px solid #fff';
            }
            this.firstElementChild.style.color = '#ff6700';
            this.firstElementChild.style.border = '2px solid #ff6700';
        })
    }

    for (var i = 0; i < video.length; i++) {
        video[i].addEventListener('mouseleave', function() {
            for (var j = 0; j < video.length; j++) {
                this.firstElementChild.style.color = '#fff';
                this.firstElementChild.style.border = '2px solid #fff';
            }
        })
    }
})